<template>
  <div>
    <!-- action必选参数, 上传的地址 -->
    <el-upload
      class="avatar-uploader el-upload--text"
      :action="baseUrl"
      :show-file-list="false"
      :on-success="handleVideoSuccess"
      :before-upload="beforeUploadVideo"
      :on-progress="uploadVideoProcess"
      :headers="headers"
    >
      <video
        v-if="firstVideo && firstVideo!=='' && videoFlag === false"
        :src="firstVideo"
        class="avatar"
        controls="controls"
      >
        您的浏览器不支持视频播放
      </video>
      <i
        v-if="(!firstVideo || firstVideo==='') && videoFlag === false"
        class="el-icon-plus avatar-uploader-icon"
      ></i>
      <el-progress
        v-if="videoFlag === true"
        type="circle"
        :percentage="videoUploadPercent"
        style="margin-top:30px;"
      ></el-progress>
    </el-upload>
    <el-button @click="handleDelete" v-if="firstVideo && videoFlag === false" type="danger">删除视频</el-button>
  </div>
</template>
<script>
import {getToken} from "@/utils/auth";
 
export default {
  name: "VideoUpload",
  props: {
    value: {
      type: String,
      default: ""
    },
  },
  data() {
    return {
      firstVideo: "",
      videoFlag: false,
      // 视频上传进度条
      videoUploadPercent: 0,
      baseUrl: "a/a/a/a",//自己上传服务器的地址
      headers: {
        Authorization: "Bearer " + getToken(),
      },
    }
  },
  watch: {
    value: {
      handler(val) {
        if (val){
          this.firstVideo = this.baseUrl + val
        }else{
          this.firstVideo = null
        }
      },
      deep: true,
      immediate: true
    }
  },
  computed: {},
  methods: {
    // 删除图片
    handleDelete() {
      this.firstVideo = null
      this.$emit("input", "");
    },
    // 验证视频格式
    beforeUploadVideo(file) {
      if (
        [
          'video/mp4',
          'video/ogg',
          'video/flv',
          'video/avi',
          'video/wmv',
          'video/rmvb'
        ].indexOf(file.type) === -1
      ) {
        this.$message.error('请上传正确的视频格式')
        return false
      }
    },
    // 上传进度显示
    uploadVideoProcess(event, file, fileList) {
      this.videoFlag = true
      this.videoUploadPercent = Math.floor(event.percent)
    },
 
    // 获取上传图片地址
    handleVideoSuccess(res, file) {
      this.videoFlag = false
      this.videoUploadPercent = 0
      if (res.code === 200) {
        this.firstVideo = res.msg
        this.$emit("input", res.msg.replace(this.baseUrl, ""));
      } else {
        this.$message.error('视频上传失败，请重新上传！')
      }
    },
 
  }
 
}
</script>
<style lang="scss" scoped>
.avatar-uploader-icon {
  border: 1px dashed #d9d9d9 !important;
}
 
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9 !important;
  border-radius: 6px !important;
  position: relative !important;
  overflow: hidden !important;
}
 
.avatar-uploader .el-upload:hover {
  border: 1px dashed #d9d9d9 !important;
  border-color: #409eff;
}
 
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 300px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
 
.avatar {
  width: 300px;
  height: 178px;
  display: block;
}
 
</style>